<template>
  <v-container>
    <v-row justify="center" class="mt-6">
      <v-col cols="8" sm="6" md="5" lg="5" xs="5">
        <v-text-field prepend-inner-icon="mdi-email" v-model="phone" placeholder="输入您的手机号" solo></v-text-field>
      </v-col>
      <v-col cols="3" sm="2" md="2" lg="1">
        <div>
          <v-btn large color="primary" @click="query()" :disabled="phone==''" rounded>查询</v-btn>
        </div>
      </v-col>
    </v-row>
    <div v-if="!success&&search">
      <v-row align="center" justify="center">
        <v-col cols="10" sm="8" md="7" lg="6">
          <v-alert type="error">未找到相关预约信息</v-alert>
        </v-col>
      </v-row>
    </div>
    <div v-if="success&&search">
      <v-row align="center" justify="center">
        <v-col cols="12" sm="8" md="7" lg="6">
          <v-card>
            <v-card-title>
              <h4>搜索到以下结果</h4>
              <v-spacer></v-spacer>
            </v-card-title>
            <v-divider></v-divider>
            <v-list three-line subheader>
              <router-link
                :to="{name:'content',query:{id:item.id}}"
                v-for="item in responseData"
                :key="item.title"
              >
                <v-list-item link>
                  <v-list-item-avatar>
                    <v-icon class="red darken-1 white--text">mdi-email</v-icon>
                  </v-list-item-avatar>

                  <v-list-item-content>
                    <v-list-item-title>{{item.content}}</v-list-item-title>
                    <v-list-item-subtitle v-text="item.orgnization"></v-list-item-subtitle>
                    <v-list-item-subtitle v-text="item.time"></v-list-item-subtitle>
                  </v-list-item-content>
                </v-list-item>
              </router-link>
            </v-list>
          </v-card>
        </v-col>
      </v-row>
    </div>
  </v-container>
</template>
<script>
export default {
  data: () => ({
    phone: "",
    responseData: {},
    search: false,
    success: true,
  }),
  methods: {
    query: function() {
      const that = this;
      this.axios
        .get("http://www.hdufocus.cn:8081/reservation/phone", {
          params: {
            phone: that.phone
          }
        })
        .catch(function() {
          that.success = false;
          that.search = true;
        })
        .then(function(response) {
          const status = response.status;
          if (status == 200) {
            that.responseData = response.data.data.reverse();
            if(that.responseData.length==0){
              that.success=false;
            }else{
              that.success=true;
            }
            that.search = true;
          } else {
            that.success = false;
            that.search = true;
          }
        });
      
    }
  }
};
</script>